<head>
    <meta content="text/html;charset=UTF-8"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>Chat With STOMP Message</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.1.4/sockjs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/layui/2.9.14/layui.js"></script>
    <link href="//cdnjs.cloudflare.com/ajax/libs/layui/2.9.14/css/layui.css" rel="stylesheet">
    <style type="text/css">
        #connect-container {
            margin: 0 auto;
            width: 400px;
        }

        #connect-container div {
            padding: 5px;
            margin: 0 7px 10px 0;
        }

        .message input {
            padding: 5px;
            margin: 0 7px 10px 0;
        }

        .layui-btn {
            display: inline-block;
        }
    </style>
    <script type="text/javascript">
        let stompClient = null;

        let headers = {
            'Authorization': 'Bearer 0gA1tvSoc7na7QL0ZlTR4xSxYEVWlQDc2mTZFYm88pQEGJM9tYE5lgnPVzgpqDBg',
            'X-Websocket-Framework': 'lambda-cloud-websocket'
        }

        $(function () {
            var target = $("#target");
            if (window.location.protocol === 'http:') {
                target.val('http://' + window.location.host + target.val());
            } else {
                target.val('https://' + window.location.host + target.val());
            }
        });

        function setConnected(connected) {
            var connect = $("#connect");
            var disconnect = $("#disconnect");
            var echo = $("#echo");

            if (connected) {
                connect.addClass("layui-btn-disabled");
                disconnect.removeClass("layui-btn-disabled");
                echo.removeClass("layui-btn-disabled");
            } else {
                connect.removeClass("layui-btn-disabled");
                disconnect.addClass("layui-btn-disabled");
                echo.addClass("layui-btn-disabled");
            }

            connect.attr("disabled", connected);
            disconnect.attr("disabled", !connected);
            echo.attr("disabled", !connected);
        }

        //连接
        function connect() {
            var target = $("#target").val();

            var ws = new SockJS(target);
            stompClient = Stomp.over(ws);

            stompClient.connect(headers, function () {
                setConnected(true);
                log('Info: STOMP connection opened.');

                stompClient.subscribe("/topic/hi", function (response) {
                    log(JSON.parse(response.body).content);
                })

                stompClient.subscribe("/user/admin/message", function (response) {
                    log(JSON.parse(response.body).content);
                })
            },function () {
                //断开处理
                setConnected(false);
                log('Info: STOMP connection closed.');
            });
        }

        //断开连接
        function disconnect() {
            if (stompClient != null) {
                stompClient.disconnect();
                stompClient = null;
            }
            setConnected(false);
            log('Info: STOMP connection closed.');
        }

        //向指定用户发送消息
        function sendMessage() {
            if (stompClient != null) {
                var receiver = $("#receiver").val();
                var msg = $("#message").val();
                log('Sent: ' + JSON.stringify({'receiver': receiver, 'msg':msg}));

                $.ajax({
                    url: "/user/message/sendToUser",
                    type: "POST",
                    dataType: "json",
                    async: true,
                    headers: headers,
                    data: {
                        "receiver": receiver,
                        "msg": msg
                    },
                    success: function (data) {

                    }
                });
            } else {
                alert('STOMP connection not established, please connect.')
            }
        }

        //日志输出
        function log(message) {
            console.debug(message);
        }
    </script>
</head>
<body>
<noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websockets rely on Javascript being
    enabled. Please enable
    Javascript and reload this page!</h2></noscript>
<div>
    <div id="connect-container" class="layui-elem-field">
        <legend>Chat With STOMP Message</legend>
        <div>
            <input id="target" type="text" class="layui-input" size="40" style="width: 350px" value="/ws"/>
        </div>
        <div>
            <button id="connect" class="layui-btn layui-btn-normal" onclick="connect();">Connect</button>
            <button id="disconnect" class="layui-btn layui-btn-normal layui-btn-disabled" disabled="disabled"
                    onclick="disconnect();">Disconnect
            </button>

        </div>
        <div class="message">
            <input id="receiver" type="text" class="layui-input" size="40" style="width: 350px" placeholder="接收者姓名" value=""/>
            <input id="message" type="text" class="layui-input" size="40" style="width: 350px" placeholder="消息内容" value=""/>
        </div>
        <div>
            <button id="echo" class="layui-btn layui-btn-normal layui-btn-disabled" disabled="disabled" onclick="sendMessage();">Send Message</button>
        </div>
    </div>
</div>
</body>
</html>
